<template>
  <el-dialog
    title="新增分类"
    :visible.sync="isShowModel"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    class="classify"
    @close="$emit('update:isShowDetail', false)">
    <el-form ref="classifyInfo" :model="classifyInfo" label-width="140px" :rules="rules">
      <el-form-item label="按钮名称：" required prop="funName">
        <el-input v-model="classifyInfo.funName"></el-input>
      </el-form-item>
      <el-form-item label="所属权限code：" required prop="funCode">
        <el-input v-model="classifyInfo.funCode"></el-input>
      </el-form-item>
      <el-form-item label="功能地址：" prop="funUrl">
        <el-input v-model="classifyInfo.funUrl"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveBtn">保存</el-button>
        <el-button @click="closeModel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  export default {
    name: "EditClassify",
    props: {
      isShowDetail: {
        type: Boolean,
        default: false
      },
      dataInfo: {
        type: Array,
        default: []
      },
      dataDetail: {
        type: Object,
        default: () => {}
      },
      menuId: {
        type: Number,
        default: null
      },
      gcode: {
        type: Array,
        default: []
      },
      arrayIndex: {
        type: Number,
        default: -1
      }
    },
    data() {
      return {
        classifyInfo: this.dataDetail,
        isShowModel: this.isShowDetail,
        rules: {
          funName: [
            {
              required: true,
              message: '请输入按钮名称',
              trigger: ['blur', 'change'],
            },
          ],
          funCode: [
            { required: true, message: '请输入所属权限code', trigger: ['blur', 'change'] },
            { validator: validate.invalidSymbolNOTEnglish, trigger: ['change', 'blur'] }
          ]
        }
      }
    },
    methods: {
      beforeClose(done) {
        this.resetForm('classifyInfo')
        done()
      },
      closeModel() {
        this.$emit('update:isShowDetail', false)
      },
      saveBtn() {
        let _this = this;
        this.$refs['classifyInfo'].validate((valid) => {
          if(valid) {
            // 从dataInfo中查找有没有重复的数据
            let _arr = this.dataInfo
            let isLife = this.dataInfo.length > 0 ? this.dataInfo.find((val, index, arr) => {
              if(this.arrayIndex === index) {
                _arr[index] = this.classifyInfo
              }
              return this.arrayIndex !== index && (val.funName == this.classifyInfo.funName || val.funCode == this.classifyInfo.funCode.toUpperCase())
            }) : false;


            if(isLife) {
              this.$message({
                message: "按钮名称或按钮code重复，请检查清楚",
                type: 'warning'
              })
            } else {
              this.$emit('changeTag', _arr);
              this.closeModel()
            }

          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    watch: {
      isShowDetail(val) {
        this.isShowModel = val
      },
      dataDetail(val) {
        if(val && val.funName) this.classifyInfo = val
      }
    }
  }
</script>

<style lang="scss">
  .classify {
    z-index: 100000!important;
    .el-dialog {
      width: 460px;
    }
  }
</style>
